import React from 'react'
import styled from 'styled-components'

import Fixed from '../components/Fixed'
import Flex from '../components/Flex'
import Icon from '../components/Icon'
import IconMoon from '../components/Icon/moon.svg'
import IconArrowLeft from '../components/Icon/arrow-double-left.svg'
import IconSun from '../components/Icon/sun.svg'
import IconRedo from '../components/Icon/redo.svg'
import IconUndo from '../components/Icon/undo.svg'

const Action = ({
	showSidebar,
	toggleSidebar,
	toggleEditorTheme,
	theme,
	handleUndo,
	handleRedo,
}) => (
	<React.Fragment>
		<ThemeBtn showSidebar={showSidebar}>
			<IconWrap center onClick={() => handleUndo()}>
				<Icon size={16} src={IconUndo} />
				&nbsp;撤销
			</IconWrap>
			<IconWrap center onClick={() => handleRedo()}>
				<Icon size={16} src={IconRedo} />
				&nbsp;重做
			</IconWrap>
			<IconWrap center onClick={() => toggleEditorTheme()}>
				<Icon
					size={20}
					src={theme === 'monokai' ? IconSun : IconMoon}
				/>
				&nbsp;{theme === 'monokai' ? '白天' : '夜间'}
			</IconWrap>
		</ThemeBtn>

		<ToggleBtnLeft
			showSidebar={showSidebar}
			onClick={() => toggleSidebar()}
		>
			<Icon size={30} src={IconArrowLeft} />
		</ToggleBtnLeft>
	</React.Fragment>
)

export default Action

const IconWrap = styled(Flex)`
	height: 30px;
	width: 70px;
	// padding: 0 10px;
	background: #cccccc;
	font-size: 14px;
	color: #fff;
	border-radius: 50px;
	margin-left: 20px;
	&:focus,
	&:hover,
	&:active,
	&:visited {
		background: #666;
		transform: scale(1.06, 1.06);
	}
	transition: background 0.2s, transform 0.2s;
`

const ThemeBtn = styled(Fixed)`
	position: absolute;
	right: ${({ showSidebar }) => (showSidebar ? '30px' : '50px')}
	bottom: auto;
	left: auto;
	padding-right:50px;
	cursor: pointer;
	top: 3px;
`

const ToggleBtnLeft = styled(ThemeBtn)`
	right: -40px;
	display: ${({ showSidebar }) => (showSidebar ? 'none' : 'block')};
`



// WEBPACK FOOTER //
// ./src/containers/ThemeAction.js